<template>
	<view class="page-body">
		
		<!-- 底部菜单 -->
		<view class="footer">
			<view class="icons">
				<view class="box" @tap="keep">
					<view class="icon" :class="[isKeep?'shoucangsel':'shoucang']"></view>
					<view class="text">{{isKeep?'已':''}}收藏</view>
				</view>
				<!-- <view class="box" @tap="goCart">
					<view class="icon cart">  </view>
					<view class="text">购物车</view>
				</view> -->
			</view>
			<view class="btn">
				<view class="buy" @tap="buy">立即购买</view>
			</view>
		</view>
		<!-- share弹窗 -->
		<view class="share" :class="shareClass" @touchmove.stop.prevent="discard" @tap="hideShare">
			<view class="mask"></view>
			<view class="layer" @tap.stop="discard">
				<view class="h1">分享</view>
				<view class="list">
					<view class="box">
						<image src="../../static/img/share/wx.png"></image>
						<view class="title">
							微信好友
						</view>
					</view>
					<view class="box">
						<image src="../../static/img/share/pyq.png"></image>
						<view class="title">
							朋友圈
						</view>
					</view>
					<view class="box">
						<image src="../../static/img/share/wb.png"></image>
						<view class="title">
							新浪微博
						</view>
					</view>
					<view class="box">
						<image src="../../static/img/share/qq.png"></image>
						<view class="title">
							QQ
						</view>
					</view>
				</view>
				<view class="btn" @tap="hideShare">
					取消
				</view>
			</view>
		</view>
		<!-- 规格-模态层弹窗 -->
		<pop-down ref="popspec" :showConfirm="false">
			<block slot="content">
					<view class="specpopdown" style="width: 750upx;">
						<view class="goods-msg flex">
							<view class="pic"><image :src="goodsData.inside_img_path" mode=""></image></view>
							<view class="goods-msg-right">
								<view class="piece"><text>￥</text>{{goodsData.shop_price}} </view>
								<view class="p">￥{{goodsData.market_price}}</view>
								
							</view>
							<view class="kucun" v-if="sku!=''">
								<text class="text">库存</text>
								<text class="number">{{goodsData.goods_number}}</text>
							</view>
							<image @click="close" class="i-close" src="/static/img/integral/icon-close.png" ></image>
						</view>
						<!-- <view class="flex content">
							<block v-for="(item,ii) in spec" :key="ii">
								<view class="spec-title">{{item.attribute_name}}</view>
								<view class="sp">
									<view v-for="(sku,idx) in item.attr_value" :key="idx" :class="[sku.selected==true?'on':'']" @click="setSelectSpec(ii,idx)">{{sku.attr_value}}</view>
								</view> 
							</block>
						</view> -->
						<view class="flex content" style="justify-content: space-between;">
						<view class="">购买数量</view>
						<view class="counter flex">
							<view class="sub" @tap.stop="sub">
								<view class="icon jian"></view>
							</view>
							<view class="input" @tap.stop="discard">
								<view class="number">{{purchaseNum}}</view>
							</view>
							<view class="add"  @tap.stop="add">
								<view class="icon jia"></view>
							</view>
						</view>
						</view>
						<view class="foot">
							<view @click="hideSpec" class="button">确认</view>
						</view>
					</view>
			</block>
		</pop-down>
		
		<!-- 商品主图轮播 -->
		<view class="swiper-box">
			<swiper circular="true" autoplay="true" @change="swiperChange">
				<swiper-item v-for="swiper in swiperList" :key="swiper.id">
					<image :src="swiper.img_url" mode="widthFix"></image>
				</swiper-item>
			</swiper>
			<view class="indicator">{{currentSwiper+1}}/{{swiperList.length}}</view>
			<view class="row-act flex">
				<view class="title">
					五折购买
				</view>
				<view class="row-act-r">
					当前剩余10份（1份1元）
				</view>
			</view>
		</view>
		<!-- 标题 价格 -->
		<view class="info-box goods-info">
			<view class="price">
				￥{{goodsData.shop_price}} <text class="p">￥{{goodsData.market_price}}</text>
				<view class="gsoldout">已售{{goodsData.click_count}}</view>
			</view>
			<view class="title">
				{{goodsData.goods_name}}
			</view>
			<view class="sub">
				{{goodsData.goods_brief}}
			</view>
		</view>
		<!-- 您购买的号码 -->
		<view class="yours " :style="{'padding-bottom':isShowAll?'60upx':'30upx'}">
			<view class="t">您参加本次获得的号码（10次）</view>
			<view class="ul flex">
				<text v-for="(item,index) in yoursNumList" :key="index" v-show="isShowAll?isShowAll:index<5">{{item.no}}</text>
				<text v-if="yoursNumList.length>5" @click="showAll" class="showall" :style="{'bottom':isShowAll?'-50upx':'0'}">{{showAllText}}</text>
			</view>
		</view>
		<view class="actmsg">
			<!-- 本期幸运号码 -->
			<view class="luckyno" v-if="isEnd">本期幸运号码：100544122</view>
			<!-- 中将规则 -->
			<view class="gorule">
				<view class="p">筹集满额，系统自动抽取 1 位用户获得五折优惠券</view>
				<view @click="goRule" class="link">查看规则>> </view>
			</view>
		</view>
		<!-- 最新参与记录 -->
		<view class="joinList mt20">
			<view class="t">2019.12.12 最新10条参与记录</view>
			<scroll-view scroll-y="true" style="height: 400upx;">
				<swiper  :autoplay="true" :interval="3000" :duration="1000" circular vertical display-multiple-items="4">
					<swiper-item>
						<view class="join-item flex">
							<image class="user-img" src="/static/img/defalut_user.png" mode=""></image>
							<view class="user-msg flex1"><text class="name text_over">拥抱阳光的月亮</text>参与<text class="copies">10份</text></view>
							<view class="time">12:41:59.2</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="join-item flex">
							<image class="user-img" src="/static/img/defalut_user.png" mode=""></image>
							<view class="user-msg flex1"><text class="name text_over">拥抱阳光的月亮</text>参与<text class="copies">10份</text></view>
							<view class="time">12:41:59.2</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="join-item flex">
							<image class="user-img" src="/static/img/defalut_user.png" mode=""></image>
							<view class="user-msg flex1"><text class="name text_over">拥抱阳光的月亮</text>参与<text class="copies">10份</text></view>
							<view class="time">12:41:59.2</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="join-item flex">
							<image class="user-img" src="/static/img/defalut_user.png" mode=""></image>
							<view class="user-msg flex1"><text class="name text_over">拥抱阳光的月亮</text>参与<text class="copies">10份</text></view>
							<view class="time">12:41:59.2</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="join-item flex">
							<image class="user-img" src="/static/img/defalut_user.png" mode=""></image>
							<view class="user-msg flex1"><text class="name text_over">拥抱阳光的月亮</text>参与<text class="copies">10份</text></view>
							<view class="time">12:41:59.2</view>
						</view>
					</swiper-item>
				</swiper>
			</scroll-view>
		</view>
		<!-- 详情 -->
		<view class="description" id="description">
			<view class="tab flex">
				<view class="title" :class="{'on':dtabid==0}" @click="changeTab(0)">商品详情</view>
				<view class="title" :class="{'on':dtabid==1}" @click="changeTab(1)">购买须知</view>
			</view>
			<view class="content" v-show="dtabid==0">
				<uParse :content="goodsData.goods_desc" :imageProp="imageProp"></uParse>
			</view>
			<view class="content" v-show="dtabid==1">
				<view class="row">
					<view class="p">· 正品保障</view>
					<view class="p">售卖的所有产品均通过正规品牌商或供货商渠道采购，确保正品。</view>
				</view>
				<view class="row">
					<view class="p">· 全场包邮</view>
					<view class="p">商品支持全国范围内包邮，除港澳台和部分偏远地区（如新疆、西藏、内蒙古等）外，您无需承担邮费。</view>
				</view>
				<view class="row">
					<view class="p">· 关于发货</view>
					<view class="p">普通商品：订单付款成功后24小时内发货</view>
					<view class="p">活动商品：订单付款成功后72小时内发货</view>
					<view class="p">上述情况不包括店主礼包、预售商品和大促活动商品，且跨境涉及海关清关，节假日等因素可能有所延迟，敬请谅解！</view>
				</view>
				<view class="row">
					<view class="p">· 关于快递</view>
					<view class="p">仓储与多家快递公司合作，会根据你的地址自动匹配当地运营较好的快递公司，保证所有国内地区均有快递可以送达，暂不支持指定快递。</view>
				</view>
				<view class="row">
					<view class="p">· 关于签收</view>
					<view class="p">收到商品后需要您当场验货确认无误后再签收，如果是包装完好且本人签收的再反馈少发、错发等类似问题，请自理。若非当面签收后发现异常请第一时间联系快递核实。</view>
				</view>
				<view class="row">
					<view class="p">· 关于退换货</view>
					<view class="p">1、无理由退货：在商品完好不拆分不影响二次销售的情况下，支持签收之日起的7天内无理由退货（生鲜类、保税区及其他页面特别说明商品不支持无理由退货），退货运费由买家承担</view>
					<view class="p">2、非无理由退货：因商品质量问题，破损错发等非买家原因导致的退货（过敏，快递延误等除外），支持签收之日起7天内退货，退货运费由本平台承担。</view>
				</view>
			</view>
		</view>
		<view style="height: 99upx;"></view>
		
	</view>
</template>

<script>
	import {
	    mapState,
	    mapMutations
	} from 'vuex'
	import uParse from '@/components/un-parse/u-parse.vue';
	import popDown from '@/components/pop-down.vue'
	import {host} from '@/utils/Config.js'
	var that;
	var count = 0;
	
export default {
	data() {
		return {
			
			swiperList: [],//轮播主图数据
			currentSwiper: 0,//轮播图下标
			shareClass:'',//分享弹窗css类，控制开关动画
			// 商品信息
			goodsData:{goods_name:'',goods_desc:'',goods_brief:'',shop_price:''},
			selectSpec:null,//选中规格
			isKeep:false,//收藏
			//商品描述html
			descriptionStr:'',
			imageProp:{
				mode:'widthFix'
			},
			id:"",//商品id
			purchaseNum:1,
			spec:[],
			sku:"",//规格组合
			selectSpecText:"选择规格",
			count:{
				count:0
			},
			serviceTel:"07554456456",
			isPopout:false,
			dtabid:0,//详情，须知切换
			yoursNumList:[],
			isShowAll:false,
			showAllText:"全部显示",
			isEnd:true
		};
	},
	async onLoad(option) {
		that=this;
		// #ifdef MP
		//小程序隐藏返回按钮
		this.showBack = false;
		// #endif
		this.id = option.id
		this.getYours()
		await this.getGoodMsg()//获取商品信息
		
	},
	onReady(){
	},
	onPageScroll(e) {
	},
	//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
	onReachBottom() {
	},
	mounted () {
	},
	methods: {
		showAll(){
			this.isShowAll = !this.isShowAll
			this.showAllText = this.isShowAll?'收起显示':'全部显示'
		},
		getYours(){
			let data= [{
				no:"1100011"
			},{
				no:"1110044"
			},{
				no:"1110044"
			},{
				no:"1110044"
			},{
				no:"1110044"
			},{
				no:"1110044"
			},{
				no:"1110022"
			},{
				no:"1110056"
			},{
				no:"1110042"
			},{
				no:"1110044"
			},{
				no:"1110044"
			},{
				no:"1110055"
			}]
			
			this.yoursNumList  = data;
			
			// this.$https.POST({
			// 	url:'/goods/goodsDetails',
			// 	data:{
			// 		gid:id
			// 	},
			// 	success(res){
					
			// 	}
			// })
		},
		//轮播图指示器
		swiperChange(event) {
			this.currentSwiper = event.detail.current;
		},
		changeTab(id){
			this.dtabid = id;
		},
		getGoodMsg(){
			let id = this.id
			return this.$https.POST({
				url:'/goods/goodsDetails',
				data:{
					gid:id
				},
				success(res){
					res.data.goods.service=[
						{name:"正品保证",description:"售卖的所有产品均通过正规品牌商或供货商渠道采购，确保正品。"},
						{name:"全场包邮",description:"商品支持全国范围内包邮，除港澳台和部分偏远地区（如新疆、西藏、内蒙古等）外，您无需承担邮费。"},
					]
					that.isKeep = res.data.goods.is_collect;
					that.comment = res.data.comment.commentList;
					that.count = res.data.comment.countList.count
					let speclist = res.data.attribute;
					that.swiperList = res.data.goods.goods_img;
					that.goodsData = res.data.goods;
					that.spec = speclist;
				}
			})
		},
		//选择规格
		setSelectSpec(ii,index){
			let speclist = this.spec;
			let nowspec = speclist[ii].attr_value;
			nowspec.forEach(v=>{
				v.selected = false;
			})
			nowspec[index].selected = true;
			var skuArr = [];
			var skutext = '';
			speclist.forEach((item,idx)=>{
				item.attr_value.forEach((item2,i)=>{
					if(item2.selected){
						skutext += item2.attr_value+' ';
						skuArr.push(item2.id)
					}
				})
			})
			this.selectSpecText = skutext;
			this.sku = skuArr.join("|");
			this.getSpecInfo()
		},
		getSpecInfo(){
			let sku = this.sku;
			let gid = this.id
			this.$https.POST({
				url:'/goods/goodsSku',
				data:{
					sku:sku,
					gid:gid
				},
				success(res){
					that.goodsData.shop_price = res.data.price;
					that.goodsData.goods_number = res.data.num;
				}
			})
		},
		
		//跳转确认订单页面
		toConfirmation(){
			let tmpList=[];
			this.$https.POST({
				url:'/goodsPay/confirmationOrder',
				data:{
					gid:that.id,
					num:that.purchaseNum,
					sku:that.sku
				},
				success(res){
					res.data.id = that.id;
					res.data.spec = that.selectSpecText;
					res.data.sku = that.sku
					let goods = res.data;
					tmpList.push(goods)
					uni.setStorage({
						key:'buylist',
						data:tmpList,
						success: () => {
							uni.navigateTo({
								url:'../order/confirmation?type=1'
							})
						}
					})
				}
			})
		},
		//立即购买
		buy(){
			if(this.spec.length==0){
				this.sku = ""
				this.toConfirmation();
				return;
			}
			this.showSpec(()=>{
				this.toConfirmation();
			});
		},
		//规格弹窗
		showSpec(fun) {
			this.$refs.popspec.show();
			this.specCallback = fun
			if(count==0){
				let speclist = this.spec;
				var skuArr = [];
				var skutext = ""
				speclist.forEach((item,idx)=>{
					item.attr_value.forEach((item2,i)=>{
						item2.selected =false;
						if(i==0){
							item2.selected = true;
						}
						if(item2.selected){
							skuArr.push(item2.id)
							skutext += item2.attr_value+' ';
						}
					})
				})
				that.selectSpecText = `${skutext}`
				that.sku = skuArr.join("|")
				this.getSpecInfo()
				count++;
			}
		},
		specCallback(){
			return 
		},
		//关闭规格弹窗
		hideSpec() {
			this.sku.length>0&&this.specCallback&&this.specCallback();
			this.specCallback = false;
			this.$refs.popspec.close()
		},
		discard() {
			//丢弃
		},
		//减少数量
		sub(){
			if(this.purchaseNum<=1){
				return;
			}
			this.purchaseNum--;
		},
		//增加数量
		add(){
			if(this.purchaseNum>=this.goodsData.goods_number){
				this.$showToast('不能再加了，没有库存了');
				return;
			}
			this.purchaseNum++;
		},
		toShop(sid){
			uni.navigateTo({
				url:"/pages/shopcenter/shopcenter?sid="+sid
			})
		},
		goCart(){
			uni.switchTab({
				url:"/pages/tabBar/cart/cart"
			})
		},
		// 客服
		toChat(){
			this.isPopout = true;
		},
		cancel(){
			this.isPopout = false;
		},
		besure(){
			uni.makePhoneCall({
				phoneNumber: this.serviceTel
			});
		},
		// 分享
		share(){
			this.shareClass = 'show';
			var strShareUrl = host+'/#/pages/goods/goods?id='+this.goodsData.id;
			var strShareTitle = this.goodsData.goods_name;
			var strShareSummary = this.goodsData.goods_brief;
			var strShareImageUrl = this.goodsData.goods_thumb
			plus.share.sendWithSystem({
				type:"web",
				title:strShareTitle,
				content:strShareSummary,
				href:strShareUrl,
				thumbs:[strShareImageUrl]
			},
			function(res){//成功回调
				console.log('share success')
			},
			function(res){
				console.log('share fail'+res.message)
			})
		},
		hideShare(){
			this.shareClass = 'hide';
			setTimeout(() => {
				this.shareClass = 'none';
			}, 150);
		},
		//收藏
		keep(){
			if(this.isKeep){
				this.$showToast('您已收藏');
				return true;
			}
			if(this.hasLogin){
				this.$https.POST({
					url:'/collect/collectGoods',
					data:{
						gid:that.id
					},
					success(res){
						that.isKeep = that.isKeep?false:true;
					}
				})
			}else{
				this.$showToast("请先登录")
				setTimeout(function() {
					uni.navigateTo({
						url:"/pages/login/login"
					})
				}, 1000);
			}
			
		},
		goRule(){
			uni.navigateTo({
				url:"/pages/goods/rules"
			})
		}
	},
	computed:mapState({
		hasLogin(state){
			return state.hasLogin==""?false:true
		},
		hasNetwork(state){
			return state.isConnected
		}
	}),
	components:{
		uParse,
		popDown
	},
	onUnload() {
		count=0;
	}
};
</script>

<style lang="scss">
page {
	background-color: $bgcolor;
}
.icon {
	font-size: 26upx;
}

.swiper-box {
	position: relative;
	width: 100%;
	height: 100vw;
	swiper {
		width: 100%;
		height: 100vw;
		swiper-item {
			image {
				width: 100%;
				height: 100vw;
			}
		}
	}
	.indicator{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 25upx;
		height: 40upx;
		line-height: 40upx;
		border-radius: 40upx;
		font-size: 22upx;
		position: absolute;
		bottom: 120upx;
		right: 20upx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.2);
	}
	.row-act{
		position: absolute;
		bottom: 0;
		padding: 0 30upx;
		color: #fff;
		height: 88upx;
		color: #FFFFFF;
		justify-content: space-between;
		box-sizing: border-box;
		background: $maincolor;
		.row-act-r{
			right: 0;
		}
	}
}
.yours{
	box-sizing: border-box;   width: 345px;  margin: 0 auto 20upx; padding: 0 30upx 30upx;border: 1px solid #ff7201;
	.t{font-size: 30upx;line-height: 60upx;padding: 10upx 0;}
	.ul{
		flex-wrap: wrap;position: relative;
		text{width: 33%;color: #666;line-height: 50upx;}
		text:nth-of-type(3n-1){text-align: center;}
		text:nth-of-type(3n){text-align: right;}
		.showall{
			color: #ff7201;text-align: right;position: absolute;right: 0;bottom: 0;
		}
	}
}
/* 活动信息 */
.actmsg{
	background: #fff;
	.luckyno{
		width:600upx;line-height: 80upx; height: 80upx;border-radius: 50upx;background: #ffe3ca;text-align: center;font-size: 36upx;color: #ff6222;margin:50upx auto 0;
	}
	.gorule{
		text-align: center;padding: 16upx 0;
		.p{font-size: 28upx;color: #fd7878;line-height: 50upx;}
		.link{line-height: 60upx;color: #999;}
	}
}
/* 参与记录 */
.joinList{
		padding: 0 30upx 30upx;background: #fff;
		swiper{height: 400upx;}
		swiper-item{height: 80upx;}
		.t{height:80upx;line-height: 80upx;}
		.join-item{
			color: #999;margin-bottom: 10upx;background: #f4f4f4;border-radius: 40upx 0 0 40upx;
			.user-img{width: 80upx;height: 80upx;margin-right: 20upx;}
			.user-msg{
				.name{width: 150upx;color: #333;}
				.copies{color: $maincolor;}
			}
			.time{padding-right:10upx;}
		}
	}

.info-box {
	width: 92%;
	padding: 20upx 4%;
	background-color: #fff;
	margin-bottom: 20upx;
}

.goods-info {
	.price {
		font-size: 46upx;
		font-weight: bold;
		color: $maincolor;
		position: relative;
		.p{
			color: #999;position: relative;font-size: 26upx;margin-left: 10upx;
			&::after{
				content: "";
				display: block;
				height: 1px;
				width: 105%;
				background: #807c87;
				position: absolute;
				top:50%;
				left: 0;
			}
		}
		.gsoldout{position: absolute;right: 0;bottom:0;font-weight: normal;color: #666;}
	}
	.title {
		font-size: 30upx;
	}
	.sub{
		font-size: 24upx;color: #808080;padding-top:10upx ;
	}
}
.spec {
	.row {
		width: 100%;
		display: flex;
		align-items: center;
		line-height:70upx;
		.text {
			font-size: 24upx;
			color: #a2a2a2;
			margin-right: 20upx;
		}
		.content {
			font-size: 28upx;
			display: flex;
			flex-wrap: wrap;
			.serviceitem{
				margin-right: 10upx;
			}
		}
		.arrow {
			position: absolute;
			right: 4%;
			.icon {
				color: #ccc;
			}
		}
	}
	
}
/* 规格弹窗 */
.specpopdown{
	width: 100%;
	.content {
		font-size: 28upx;
		display: flex;
		flex-wrap: wrap;
		padding: 20upx 30upx ;
		box-sizing: border-box;
		.spec-title{
			line-height: 60upx;margin-top:6upx ;
		}
		.sp {
			width: 100%;
			display: flex;
			view {
				background-color: #f6f6f6;
				padding: 0 20upx;
				color: #999;
				margin-right:30upx ;
				height: 46upx;
				line-height: 46upx;
				border-radius: 5upx;
				&.on{
					background:$maincolor;
					color: #fff;
				}
			}
		}
	}
	.goods-msg{
		padding-bottom: 44upx;border-bottom: 1px solid #f3f3f3;position: relative;
		.pic{
			width: 200upx;height: 200upx;border: 1px solid #f3f3f3;margin-top: -45upx; margin-left: 30upx;
			background: url("") no-repeat center/100upx #e3e3e3;
			image{width: 100%;height: 100%;}
		}
		.goods-msg-right{
			margin-left: 30upx;
			.p{
				color: #999;position: relative;
				&::after{
					content: "";
					display: block;
					height: 1px;
					width: 105%;
					background: #807c87;
					position: absolute;
					top:50%;
				}
			}
			.piece {
				font-size: 46upx;
				color: $maincolor;
				margin-top: 12upx;
				text{font-size:30upx ;}
			}
		}
		.kucun{
			position: absolute;
			right: 30upx;
			bottom: 44upx;
			color: #888;
		}
		
		.i-close{
			width: 40upx;height: 40upx; position: absolute;right: 0;top: 0; padding:20upx;
		}
	}
	.amount{padding-top: 30upx;color: #999;}
	.amount{
		margin-left:26upx ;
	}
	.counter{
		border:1px solid #ccc;border-radius: 10upx;height: 35px;width:240upx;line-height: 34px;text-align: center;
		.sub{background: #f3f3f3;width: 70upx;height: 100%;}
		.add{height: 100%;width: 70upx;}
		.input{width: 100upx;height: 100%;text-align: center;border-left:1px solid #ccc ;border-right: 1px solid #ccc;}
	}
	.foot{padding: 16upx 0;border-top: 1px solid #f3f3f3;}
	.button{
		background: $maincolor;border-radius: 10upx; width:670upx;margin:0 auto;  
	}
	
}
	
.comments {
	.row {
		width: 100%;
		display: flex;
		align-items: center;
		line-height:60upx;
		.text {
			font-size: 30upx;
		}
		.arrow {
			font-size: 28upx;
			position: absolute;
			right: 4%;
			color: $maincolor;
			.show {
				display: flex;
				align-items: center;
				.icon {
					color:$maincolor;
				}
			}
		}
	}
	.comment {
		width: 100%;
		margin-top:20upx;
		.user-info {
			width: 100%;
			height: 40upx;
			display: flex;
			align-items: center;
			.face {
				width: 40upx;
				height: 40upx;
				margin-right: 8upx;
				image {
					width: 40upx;
					height: 40upx;
					border-radius: 100%;
				}
			}
			.username {
				font-size: 24upx;
				color: #999;
			}
		}
		.content {
			margin-top: 12upx;
			font-size: 26upx;
		}
	}
}
.description {
	margin-top: 30upx;
	.tab{
		padding: 0 30upx;box-sizing: border-box;
		.on{background: #fff;color: $maincolor;    border: 1px solid #efefef; border-bottom: none; border-right: none;}
	}
	.title {
		width: 100%;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26upx;
		color: #999;
		background: #f5f5f5;
	}
	.content{
		padding: 30upx;
		box-sizing: border-box;
		background: #fff;
	}
	/* 购买须知 */
	.row{
		padding-bottom: 30upx;
		.p:nth-of-type(1){
			font-size: 30upx;
			margin: 5px 0;
		}
		.p:nth-of-type(2){
			font-size: 28upx;
			color: #999;
		}
	}
}
.footer {
	position: fixed;
	bottom: 0upx;
	width: 92%;
	padding: 0 4%;
	height: 99upx;
	border-top: solid 1upx #eee;
	background-color: #fff;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.icons {
		display: flex;
		height: 80upx;
		margin-left: -2%;
		.box {
			width: 90upx;
			height: 80upx;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			.icon ,.iconfont{
				font-size: 40upx;
				color: #828282;
			}
			.text {
				display: flex;
				justify-content: center;
				width: 100%;
				font-size: 22upx;
				color: #666;
			}
		}
	}
	.btn {
		height: 80upx;
		border-radius: 40upx;
		overflow: hidden;
		display: flex;
		margin-right: -2%;
		.joinCart,
		.buy {
			height: 80upx;
			padding: 0 40upx;
			color: #fff;
			display: flex;
			align-items: center;
			font-size: 28upx;
		}
		.joinCart {
			background-color: #f0b46c;
		}
		.buy {
			background-color: $maincolor;
		}
	}
}
/* 服务弹窗 */
.service {
	.content{padding: 0 40upx;}
	.row {
		margin: 30upx 0;
		.title {
			font-size: 30upx;
			margin: 10upx 0;
		}
		.description {
			font-size: 28upx;
			color: #999;
		}
	}
}

.share{
	display: none;
	&.show {
		display: block;
		.mask{
			animation: showPopup 0.15s linear both;
		}
		.layer {
			animation: showLayer 0.15s linear both;
		}
	}
	&.hide {
		display: block;
		.mask{
			animation: hidePopup 0.15s linear both;
		}
		
		.layer {
			animation: hideLayer 0.15s linear both;
		}
	}
	&.none {
		display: none;
	}
	.mask{
		background-color: rgba(0,0,0,.5);
		position: fixed;
		width: 100%;
		height: 100%;
		top:0;
		z-index: 11;
	}
	.layer{
		width: 92%;
		position: fixed;
		z-index: 12;
		padding: 0 4%;
		top: 100%;
		background-color: rgba(255,255,255,0.9);
		.list{
			width: 100%;
			display: flex;
			padding:10upx 0 30upx 0;
			.box{
				width: 25%;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				image{
					width: 13.8vw;
					height: 13.8vw;
				}
				.title{
					margin-top: 10upx;
					display: flex;
					justify-content: center;
					width: 100%;
					font-size: 26upx;
				}
			}
		}
		.btn{
			width: 100%;
			height: 100upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28upx;
			border-top: solid 1upx #666666;
		}
		.h1{
			width: 100%;
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 34upx;
		}
	}
}

.askbox{
	position: fixed; z-index: -1; opacity: 0; transition: all .2s linear;
	left: 0; right: 0; top: 0; bottom: 0;
	align-items: center; justify-content: center;
		.body{position: relative;
			z-index: 10;}
		.cont{
			text-align: center;
			width:560upx;
			min-height: 200upx;
			background: #fff;
			border-radius: 10upx;
			overflow: hidden;
		}
		.h3{line-height: 90upx;color: #0e1327;font-size: 32upx;text-align: center;font-weight: bold;}
		.p{
			color: #a9b0c0;font-size: 26upx;line-height:40upx;padding: 0 20upx;
			.bn{color: #666d83;font-weight: bold;padding: 0 4upx;}
			text:nth-of-type(2){color: #2462ed;}
		}
		.btn-row-more{
			padding: 0;border-top: 1px solid #dfdfdf; margin-top:35upx; 
			.btn{height: 88upx;line-height: 88upx;text-align: center;color: #007AFF;background: #fff;border-radius: 0;margin-top:0; }
			.btn:nth-of-type(1){border-right: 1px solid #dfdfdf;color: #a9b0c0;}
		}
	}
.askbox.fadein{
	opacity: 1;z-index: 10;
}
</style>
